@import "_reset.less";

* {
  background-repeat : no-repeat !important;
}

body {
  background : #000;
}

#loading-cover {
  position   : fixed;
  z-index    : 999999;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : #000;
}

.cover-cloud {
  position    : fixed;
  z-index     : 500;
  width       : 640px;
  height      : 480px;
  left        : 50%;
  top         : 50%;
  margin-left : -320px;
  margin-top  : -120px;
  background  : url(../img/cover-cloud.png);
  -webkit-transform : scale(5, 5) translate3d(-300px, 300px, 0);

  &.show {
    -webkit-transform  : scale(5, 5) translate3d(300px,-300px,0);
    -webkit-transition : all 4s;
  }
}

.dot {
  position   : absolute;
  width      : 130px;
  height     : 130px;
  background : url(../img/dot-center.png);

  .ring {
    position   : absolute;
    left       : 0;
    top        : 0;
    right      : 0;
    bottom     : 0;
    background : url(../img/dot-light.png);
    -webkit-animation : bubble 2s linear infinite;
  }

  @-webkit-keyframes bubble {
    0% {
      opacity : 0.01;
      -webkit-transform : scale(0.7, 0.7);
    }
    20% {
      opacity : 0.7;
      -webkit-transform : scale(1, 1);
    }
    100% {
      opacity : 0.01;
      -webkit-transform : scale(1.4, 1.4);
    }
  }
}

.wrapper {
  overflow : hidden;
  position : fixed;
  z-index  : 110;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;
}

.girl {
  z-index  : 1000;
  position : fixed;
  width    : 0;
  height   : 0;
  top      : 50%;
  left     : 50%;

  &.fly-in {
    -webkit-transform : translateX(-500px);
  }

  &.fly-center {
    -webkit-transform : translateX(0px);
  }

  &.fly-out {
    -webkit-transform : translateX(500px);
  }

  @-webkit-keyframes girlsleep {
    to { background-position : 0px -2600px; }
  }
  @-webkit-keyframes girlwakeup {
    to { background-position : 0px -4590px; }
  }
  @-webkit-keyframes girlstand {
    to { background-position : 0px -4420px; }
  }
  @-webkit-keyframes girlqilin {
    to { background-position : 0px -1610px; }
  }

  .girl-item {
    display  : none;
    position : absolute;
    left     : 0;
    top      : 0;

    &.shown {
      display : block;
    }
  }

  .girl-sleep {
    width       : 230px;
    height      : 100px;
    margin-left : -115px;
    margin-top  : -50px;
    background  : url(../img/ani-girl-sleep.png) 0 0;
    -webkit-animation : girlsleep 2s steps(26, start) infinite;
  }

  .girl-wakeup {
    display     : none;
    width       : 230px;
    height      : 170px;
    margin-left : -115px;
    margin-top  : -111px;
    background  : url(../img/ani-girl-wakeup.png) 0 0;
    -webkit-animation : girlwakeup 2s steps(27, start) forwards;
  }

  .girl-stand {
    width       : 230px;
    height      : 170px;
    margin-left : -115px;
    margin-top  : -116px;
    background  : url(../img/ani-girl-stand.png) 0 0;
    -webkit-animation : girlstand 2s steps(26, start) infinite;
  }

  .girl-qilin {
    width       : 230px;
    height      : 230px;
    margin-left : -115px;
    margin-top  : -145px;
    background  : url(../img/ani-girl-qilin.png);
    -webkit-animation : girlqilin 1s steps(7, start) infinite;
  }
}

.page {
  overflow : hidden;
  position : absolute;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;
  background-position : center center !important;
}

.page-home {
  z-index    : 100;
  background : url(../img/home-bg.jpg);

  .loading-tip {
    display    : none;
    position   : absolute;
    width      : 100%;
    height     : 0;
    left       : 0;
    top        : 50%;
    margin-top : -112px;
    font-size  : 24px;
    color      : #ddd;
    text-align : center;
  }

  .shake-tip {
    display     : none;
    position    : absolute;
    width       : 105px;
    height      : 174px;
    left        : 50%;
    top         : 50%;
    margin-left : -52px;
    margin-top  : 180px;
    background  : url(../img/home-shake-tip.png);
    -webkit-animation : shaketip 0.4s infinite alternate;
  }

  @-webkit-keyframes shaketip {
    0%   { -webkit-transform : translateY(0px) }
    100% { -webkit-transform : translateY(-15px) }
  }
}

.page-star {
  z-index    : 90;
  background : #000;

  .scene {
    position   : absolute;
    width      : 1900px;
    height     : 1136px;
    left       : 0;
    top        : 0;
    background : url(../img/star-bg.jpg);
  }

  .dot {
    display     : none;
    left        : 50%;
    top         : 50%;
    margin-left : -65px;
    margin-top  : 100px;
  }

  .curtain-left, .curtain-right{
    position   : absolute;
    height     : 1136px;
    left       : 0;
    right      : 0;
    top        : 0;
  }

  .curtain-left {
    background : url(../img/star-curtain-left.png);
  }
  .curtain-right {
    background : url(../img/star-curtain-right.png);
  }

  .content {
    position    : absolute;
    width       : 381px;
    height      : 681px;
    top         : 100px;
    left        : 50%;
    margin-left : -191px;
    background  : url(../img/star-word-content.png);

    img {
      display     : block;
      position    : absolute;
      width       : 280px;
      height      : 280px;
      left        : 50%;
      top         : 50%;
      margin-left : -141px;
      margin-top  : -148px;
      border      : none;
      outline     : none;
      background  : none;
    }
  }

  .star-tip {
    display     : none;
    position    : absolute;
    width       : 339px;
    height      : 342px;
    top         : 140px;
    left        : 50%;
    margin-left : -105px;
    background  : url(../img/star-star-tip.png);
  }

  .drag-tip {
    position    : absolute;
    width       : 147px;
    height      : 125px;
    top         : 700px;
    left        : 50%;
    margin-left : -73px;
    background  : url(../img/star-drag-tip.png);
  }
}

.page-sea {
  z-index    : 80;
  background : #000;

  .scene {
    position   : absolute;
    width      : 11000px;
    height     : 1136px;
    left       : 0;
    top        : 50%;
    margin-top : -568px;

    .part {
      float    : left;
      position : relative;
      width    : 2000px;
      height   : 1136px;
      margin   : 0;
      padding  : 0;
    }
    .part1 {
      background : url(../img/sea-bg1.jpg);
    }
    .part2 {
      background : url(../img/sea-bg2.jpg);
    }
    .part3 {
      background : url(../img/sea-bg3.jpg);
    }
    .part4 {
      background : url(../img/sea-bg4.jpg);
    }
    .part5 {
      background : url(../img/sea-bg5.jpg);
    }
  }

  .word {
    display     : none;
    position    : absolute;
    width       : 300px;
    height      : 90px;
    left        : 50%;
    top         : 50%;
    margin-left : -150px;
    margin-top  : -380px;
  }

  .word-left {
    background : url(../img/sea-word-left.png);
  }
  .word-right {
    background : url(../img/sea-word-right.png);
  }

  @-webkit-keyframes yanhua {
    to {
      background-position : 0px -17940px;
    }
  }

  .yanhua {
    display    : none;
    position   : absolute;
    width      : 260px;
    height     : 260px;
    left       : 50%;
    top        : 50%;
    background : url(../img/ani-yanhua.png);
  }

  .yanhua1 {
    margin-left : -130px;
    margin-top  : -430px;
    &.show {
      -webkit-animation : yanhua 2s steps(69, start);
    }
  }
  .yanhua2 {
    margin-left : -90px;
    margin-top  : -390px;
    &.show {
      -webkit-animation : yanhua 2s steps(69, start) 0.5s;
    }
  }
  .yanhua3 {
    margin-left : -210px;
    margin-top  : -370px;
    &.show {
      -webkit-animation : yanhua 2s steps(69, start) 2s;
    }
  }
}

.op-pop {
  display  : none;
  position : fixed;
  z-index  : 1100;
  left     : 0;
  top      : 0;
  right    : 0;
  bottom   : 0;

  .window1, .window2, .window3 {
    display  : none;
    position : absolute;
    left     : 0;
    top      : 0;
    right    : 0;
    bottom   : 0;
  }

  .window1 {

    .op-window {
      position    : absolute;
      width       : 593px;
      height      : 841px;
      left        : 50%;
      top         : 50%;
      margin-left : -297px;
      margin-top  : -422px;
      background  : url(../img/op-w1-bg.png);

      .btn-sel {
        position : absolute;
        width    : 199px;
        height   : 199px;
        left     : 50%;
        top      : 50%;
        &.active {
          background : url(../img/op-w1-ring.png);
        }
      }
      .btn1 {
        margin-left : -210px;
        margin-top  : -187px;
      }
      .btn2 {
        margin-left : 15px;
        margin-top  : -187px;
      }
      .btn3 {
        margin-left : -210px;
        margin-top  : 36px;
      }
      .btn4 {
        margin-left : 15px;
        margin-top  : 36px;
      }

      .btn-submit {
        position    : absolute;
        width       : 430px;
        height      : 100px;
        left        : 50%;
        top         : 50%;
        margin-left : -215px;
        margin-top  : 275px;
      }
    }

    .tip-success {
      display     : none;
      position    : absolute;
      width       : 337px;
      height      : 398px;
      left        : 50%;
      top         : 140px;
      margin-left : -123px;
      background  : url(../img/op-w1-success.png);
    }

    .tip-failed {
      display     : none;
      position    : absolute;
      width       : 473px;
      height      : 273px;
      left        : 50%;
      top         : 50%;
      margin-left : -228px;
      margin-top  : -150px;
      background  : url(../img/op-w1-failed.png);
    }
  }

  .window2 {

    .tip {
      position    : absolute;
      width       : 464px;
      height      : 712px;
      top         : 50%;
      left        : 50%;
      margin-top  : -360px;
      margin-left : -252px;
      background  : url(../img/op-w2-tip.png);

      .btn {
        position : absolute;
        width    : 430px;
        height   : 100px;
        right    : 0;
        bottom   : 0;
      }
    }

    .op-window {
      display     : none;
      position    : absolute;
      width       : 593px;
      height      : 599px;
      left        : 50%;
      top         : 50%;
      margin-left : -297px;
      margin-top  : -300px;
      background  : url(../img/op-w2-bg.png);

      .btn {
        position : absolute;
        width    : 170px;
        height   : 180px;
        left     : 50%;
        top      : 50%;
        opacity  : 0.2;

        &.remain {
          opacity : 1;
        }
        &.disabled {
          opacity : 0.5;
        }
      }

      .icon1 {
        background : url(../img/op-w2-icon1.png);
        &.active {
          background : url(../img/op-w2-icon1-act.png);
        }
      }
      .icon2 {
        background : url(../img/op-w2-icon2.png);
        &.active {
          background : url(../img/op-w2-icon2-act.png);
        }
      }
      .icon3 {
        background : url(../img/op-w2-icon3.png);
        &.active {
          background : url(../img/op-w2-icon3-act.png);
        }
      }
      .icon4 {
        background : url(../img/op-w2-icon4.png);
        &.active {
          background : url(../img/op-w2-icon4-act.png);
        }
      }
      .icon5 {
        background : url(../img/op-w2-icon5.png);
        &.active {
          background : url(../img/op-w2-icon5-act.png);
        }
      }
      .icon6 {
        background : url(../img/op-w2-icon6.png);
        &.active {
          background : url(../img/op-w2-icon6-act.png);
        }
      }
    }

    &.window2-left {
      .op-window {
        .icon6 {
          margin-left : -245px;
          margin-top  : -100px;
        }
        .icon3 {
          margin-left : -90px;
          margin-top  : -100px;
        }
        .icon4 {
          margin-left : 65px;
          margin-top  : -100px;
        }
        .icon5 {
          margin-left : -245px;
          margin-top  : 70px;
        }
        .icon1 {
          margin-left : -90px;
          margin-top  : 70px;
        }
        .icon2 {
          margin-left : 65px;
          margin-top  : 70px;
        }
      }
    }

    &.window2-right {
      .op-window {
        .icon1 {
          margin-left : -245px;
          margin-top  : -100px;
        }
        .icon2 {
          margin-left : -90px;
          margin-top  : -100px;
        }
        .icon3 {
          margin-left : 65px;
          margin-top  : -100px;
        }
        .icon4 {
          margin-left : -245px;
          margin-top  : 70px;
        }
        .icon5 {
          margin-left : -90px;
          margin-top  : 70px;
        }
        .icon6 {
          margin-left : 65px;
          margin-top  : 70px;
        }
      }
    }

    .tip-success {
      display     : none;
      position    : absolute;
      width       : 434px;
      height      : 770px;
      left        : 50%;
      top         : 50%;
      margin-left : -217px;
      margin-top  : -385px;
      background  : url(../img/op-w2-success.png);
    }
  }

  .window3 {

    .op-window {
      position    : absolute;
      width       : 593px;
      height      : 760px;
      left        : 50%;
      top         : 50%;
      margin-left : -297px;
      margin-top  : -380px;

      .btn {
        position : absolute;
        width    : 122px;
        height   : 127px;
        left     : 50%;
        top      : 50%;
      }
    }

    &.window3-left {
      .op-window {
        background : url(../img/op-w3-left-bg.png);
      }
      .btn1 {
        margin-left : -207px;
        margin-top  : -143px;
        &.active {
          background : url(../img/op-w3-left-btn1.png);
        }
      }
      .btn2 {
        margin-left : -207px;
        margin-top  : 5px;
        &.active {
          background : url(../img/op-w3-left-btn2.png);
        }
      }
      .btn3 {
        margin-left : -61px;
        margin-top  : 5px;
        &.active {
          background : url(../img/op-w3-left-btn3.png);
        }
      }
      .btn4 {
        margin-left : 86px;
        margin-top  : 154px;
        &.active {
          background : url(../img/op-w3-left-btn4.png);
        }
      }
    }

    &.window3-right {
      .op-window {
        background : url(../img/op-w3-right-bg.png);
      }
      .btn1 {
        margin-left : -61px;
        margin-top  : -143px;
        &.active {
          background : url(../img/op-w3-right-btn1.png);
        }
      }
      .btn2 {
        margin-left : -207px;
        margin-top  : 5px;
        &.active {
          background : url(../img/op-w3-right-btn2.png);
        }
      }
      .btn3 {
        margin-left : 86px;
        margin-top  : 5px;
        &.active {
          background : url(../img/op-w3-right-btn3.png);
        }
      }
      .btn4 {
        margin-left : 86px;
        margin-top  : 154px;
        &.active {
          background : url(../img/op-w3-right-btn4.png);
        }
      }
    }

  }
}

.op-pop-shadow {
  display    : none;
  position   : fixed;
  z-index    : 900;
  left       : 0;
  top        : 0;
  right      : 0;
  bottom     : 0;
  background : rgba(0, 0, 0, 0.7);
}

.star-area {
  position   : fixed;
  z-index    : 1000;
  width      : 232px;
  height     : 92px;
  top        : 25px;
  right      : 20px;
  background : url(../img/common-star-icon-bg.png);
  -webkit-transition : all 0.5s;

  &.hidden {
    -webkit-transform : translateY(-200px);
  }

  .star {
    position : absolute;
    width    : 68px;
    height   : 68px;
    top      : 0;
    opacity  : 0;
    -webkit-transform  : scale(3, 3);
    -webkit-transition : all 0.5s;

    &.active {
      opacity : 1;
      -webkit-transform : scale(1, 1);
    }
  }
  .star-zhongguo {
    left       : 0;
    background : url(../img/common-star-icon-zhongguo.png);
  }
  .star-taiwan {
    left       : 84px;
    background : url(../img/common-star-icon-taiwan.png);
  }
  .star-hanguo {
    right      : 0;
    background : url(../img/common-star-icon-hanguo.png);
  }
}

.page-end {
  position   : absolute;
  width      : 640px;
  height     : 1008px;
  left       : 0;
  top        : 0;
  background : url(../img/end-bg.jpg);

  * {
    display  : block;
    position : absolute;
    left     : 50%;
    top      : 50%;
  }

  input {
    margin      : 0;
    padding     : 0;
    line-height : 100%;
    font-size   : 22px;
    color       : #000;
    text-align  : center;
    border      : none;
    outline     : none;
    background  : none;
    &::-webkit-input-placeholder {
      color : #000;
    }
  }

  .btn {
    position : absolute;
    left     : 50%;
    top      : 50%;
  }

  .name {
    width       : 491px;
    height      : 73px;
    margin-left : -244px;
    margin-top  : -49px;
  }

  .phone {
    width       : 313px;
    height      : 82px;
    margin-left : -225px;
    margin-top  : 58px;
  }

  .verify {
    width       : 302px;
    height      : 62px;
    margin-left : -148px;
    margin-top  : 188px;
  }

  .get-verify {
    width       : 140px;
    height      : 81px;
    margin-left : 88px;
    margin-top  : 59px;
  }

  .submit {
    width       : 452px;
    height      : 81px;
    margin-left : -224px;
    margin-top  : 298px;
  }
}

.page-share {
  display    : none;
  position   : fixed;
  z-index    : 2000;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : url(../img/share-bg.jpg) center top;
}

